<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0px;
        }

        #can {
            background-color: black;
            display: block;


        }
    </style>
</head>

<body>
    <canvas id="can"></canvas>
    <script>
        var canvas = document.querySelector('#can');
        var ctx = canvas.getContext('2d');
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
        
        //2.小球的性格 1.颜色 2.初始开始 3.位置 4.运行方向 5.20个小球
        //批量生成小球（对象）  构造函数
        function randomColor() {
            var red = Math.floor(Math.random() * 256);
            var green = Math.floor(Math.random() * 256);
            var blue = Math.floor(Math.random() * 256);
            return "rgb(" + red + "," + green + "," + blue + ")";
        }



        function Circle(x, y) {
            this.color = randomColor();
            this.r = Math.random() * 4 + 3;
            this.x = x;
            this.y = y;
            this.rSpeed = 0.95;

            this.speedX = Math.random() > 0.5 ? Math.random() * 4 : -(Math.random()) * 4;
            this.speedY = Math.random() > 0.5 ? Math.random() * 4 : -(Math.random()) * 4;
        }
        var arr = [];
        canvas.addEventListener("click", function (e) {
            var x = e.clientX;
            var y = e.clientY;
            for (var i = 0; i < 200; i++) {
                arr.push(new Circle(x, y));
            }
        });
        canvas.addEventListener("mousemove", function (e) {
            var x = e.clientX;
            var y = e.clientY;
            for (var i = 0; i < 20; i++) {
                arr.push(new Circle(x, y));
            }
        });
        //渲染
        var speedX = 0;
        var speedY = 0;
        setInterval(function () {
            canvas.width = window.innerWidth;
            for (var i = 0; i < arr.length; i++) {
                var c = arr[i]
                c.x += c.speedX
                c.y += c.speedY
                c.r *= c.rSpeed
                ctx.beginPath();
                ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2);
                ctx.fillStyle = c.color;
                ctx.fill();
                ctx.closePath();

            }

        }, 1000 / 60);



    </script>

</body>

</html>